<template>
	<view class="switch_box">
		<view 
			class="point"
			:style="[{'left':!state ? '4%' : '49%'}]"
		></view>
		<view class="info_box">
			<template v-if="isShowTip">
				<view>{{pointTip[0]}}</view>
				<view>{{pointTip[1]}}</view>				
			</template>
		</view>
	</view>
</template>

<script setup>
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color,
		primary_hot_color,
		shallow_text_color
	} = dynamicStyle_store.globalStyle
	
	const props = defineProps({
		state:{
			type:Boolean
		},
		isShowTip:{
			type:Boolean,
			default:true
		},
		pointTip:{
			type:Array,
			default:['关','开']
		}
	})
</script>

<style lang="less">
	.switch_box{
		border: 4rpx solid v-bind(primary_hot_color);
		width: 70rpx;
		height: 40rpx;
		border-radius: 20rpx;
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.point{
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			top:50%;
			left: 0rpx;
			transform: translate(0,-50%);
			background-color: v-bind(primary_hot_color);
			border-radius: 38rpx;
			transition: all .3s;
		}
		.info_box{
			font-size: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 6rpx;
			color: v-bind(shallow_text_color);
			width: 100%;
		}
	}
</style>